import { Button, Form, Input, Select, Space, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { User as UserType } from '@/types/api'
import api from '@/api'
import { useEffect, useState, useRef } from 'react'
import CreateUser from './CreateUser'
import styles from './index.module.less'
import { IAction } from '@/types/modal'

const User = () => {
  const userRef = useRef<{
    open: (type: IAction, data?: UserType.userInfo) => void
  }>()
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0
  })
  //const pagination: TablePaginationConfig = { position: ['bottomRight'] }
  const [form] = Form.useForm()
  const [tableData, setTableData] = useState<UserType.userInfo[]>([])

  const getUserList = () => {
    api
      .getUserList()
      .then(res => {
        setTableData(res.data)
        const total = res.data.length || 0
        setPagination({ current: 1, pageSize: 10, total: total })
      })
      .catch(err => console.log('获取用户信息时出现异常', err))
  }

  useEffect(() => {
    getUserList()
  }, [])

  const handleEdit = (record: UserType.userInfo) => {
    userRef.current?.open('edit', record)
  }

  const columns: ColumnsType<UserType.userInfo> = [
    { key: 'id', dataIndex: 'id', title: 'id' },
    { key: 'nickname', dataIndex: 'nickname', title: '昵称' },
    { key: 'email', dataIndex: 'email', title: '邮箱' },
    { key: 'password', dataIndex: 'password', title: '密文密码' },
    { key: 'pwd', dataIndex: 'pwd', title: '明文密码' },
    {
      key: 'status',
      dataIndex: 'status',
      title: '状态',
      render(status: number) {
        return {
          0: '停用',
          1: '正常'
        }[status]
      }
    },
    { key: 'time', dataIndex: 'time', title: '创建时间' },
    {
      key: 'ope',
      dataIndex: 'ope',
      title: '操作',
      render(record, val) {
        return (
          <Space>
            <Button type='text' onClick={() => handleEdit(val)}>
              编辑
            </Button>
            <Button type='text'>删除</Button>
          </Space>
        )
      }
    }
  ]

  const handleReset = () => {
    form.resetFields() // 表单提供的功能，重置所有字段
  }

  const handleCreate = () => {
    userRef.current?.open('create')
  }
  return (
    <div className={styles.user1111}>
      <Form form={form} className='search-form' layout='inline' initialValues={{ state: 0 }}>
        <Form.Item name='userId' label='用户ID'>
          <Input placeholder='请输入用户ID' />
        </Form.Item>
        <Form.Item name='userName' label='用户名称'>
          <Input placeholder='请输入用户名称' />
        </Form.Item>
        <Form.Item name='state' label='状态'>
          <Select style={{ width: 120 }}>
            <Select.Option value={0}>所有</Select.Option>
            <Select.Option value={1}>在职</Select.Option>
            <Select.Option value={2}>试用期</Select.Option>
            <Select.Option value={3}>离职</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type='primary'>搜索</Button>
            <Button type='default' onClick={handleReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>用户列表</div>
          <div className='action'>
            <Button type='primary' onClick={handleCreate}>
              新增
            </Button>
            <Button type='primary' danger>
              批量删除
            </Button>
          </div>
        </div>
        <Table
          rowKey='id'
          dataSource={tableData}
          columns={columns}
          rowSelection={{ type: 'checkbox' }}
          bordered
          pagination={{
            position: ['bottomRight'],
            current: pagination.current,
            pageSize: pagination.pageSize,
            showQuickJumper: true,
            showSizeChanger: true,
            showTotal: total => {
              return `总共${total}条`
            },
            onChange: (page, pageSize) => {
              setPagination({
                current: page,
                pageSize,
                total: tableData.length
              })
            }
          }}
        ></Table>
      </div>
      <CreateUser mRef={userRef} update={() => getUserList()} />
    </div>
  )
}

export default User
